<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        组件的使用分为三步“
        第一步：创建组件
              Vue.extend({该配置项和new Vue配置项几乎相同，略有差别})
              区别有哪些？
                 1，创建Vue组件的时候，配置项中不能使用el配置项。（但是需要使用template配置项来配置模板语句）
                 2，配置项中的data不能使用直接对象的形式，必须使用function。
        第二步：注册组件
               局部注册：
                 在配置项当中使用components，语法格式：
                    components : {
                        组件的名字 ： 组件对象
                    }
                    全局注册：
        第三步：使用组件
     -->
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 使用组件 -->
        <userlist></userlist>
        <userlist></userlist>
        <userlist></userlist>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //1，创建组件（结构HTML 交互JS 样式CSS）
        const myComponent = Vue.extend({
            template: `
            <ul>
            <li v-for="(user,index) of users" :key="user.id">
                {{index}},{{user.name}}
            </li>
        </ul>
            `,
            data() {
                return {
                    users: [
                        { id: 001, name: 'jack' },
                        { id: 002, name: 'lucy' },
                        { id: 003, name: 'james' }
                    ]
                }
            }
        })

        //Vue实例
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '第一个Vue组件',
            },
            //注册组件（局部注册）
            components: {
                userlist: myComponent
            }
        })
    </script>
</body>

</html>